<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/my.css" rel="stylesheet" />
		<style>
			h5 {
				margin: 5px 7px;
			}

			.header {
				margin-top: 10%;
				color: #666666;
				text-align: center;
			}

			.footer {
				margin-top: 12%;
				width: 100%;
				color: #777777;
				font-style: italic;
				text-align: center;
			}

			.title {
				margin: 35px 15px 10px;
				color: #fff;
			}

			.title+.content {
				margin: 10px 15px 35px;
				color: #bbb;
				text-indent: 1em;
				font-size: 14px;
				line-height: 24px;
			}
			.mui-popup-text {
				text-align: left; 
			}
		</style>
	</head>
	<body>
		<!-- 侧滑导航根容器 -->
		<!-- <div class="mui-off-canvas-wrap mui-draggable"> -->
			<!-- 主页面容器 -->
			<!-- <div class="mui-inner-wrap mui-transitioning"> -->
				<!-- 主页面标题 -->
				<!-- <header class="mui-bar mui-bar-nav bc2">
					<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" id="menuShow" href="#menu"></a>
					<h1 class="mui-title">搜书</h1>
				</header> -->
				<div class="mui-content mui-scroll-wrapper bc" id="content">
					<!-- <div class="mui-scroll"> -->
						<!-- 主界面具体展示内容 -->
						<div class="mui-content-padded header" style="margin: 8%;">
							<img src="images/logo3.png"
								style="border-radius: 8px;margin-bottom: 2%;width: 100%;height: 5.8rem;" />
							<br />
							纯净&nbsp;&nbsp;&nbsp;&nbsp;极简&nbsp;&nbsp;&nbsp;&nbsp;便捷
						</div>
						<div class="mui-content-padded" style="margin: 8%;">
							<div class="mui-input-row mui-search">
								<input type="search" placeholder="" data-input-clear="1" data-input-search="1"
									disabled="disabled">
								<span class="mui-placeholder" id="key">
									<span class="mui-icon mui-icon-search"></span>
									<span>开启精彩阅读时光</span>
								</span>
							</div>
						</div>
						<div align="center" id="ago">

						</div>
						<div class="mui-card" style="margin: 8%;">
							<ul class="mui-table-view bc2 bookList" id="dataList">
								<li class="mui-table-view-divider">人气推荐</li>
								<li class="mui-table-view-cell" align="center">正在加载...</li>
							</ul>
						</div>
						<!-- <div class="footer">
							<small>www.soubook.top</small>
						</div> -->
					<!-- </div> -->
				</div>
				<div class="mui-off-canvas-backdrop" id="backdrop"></div>
			<!-- </div> -->
		<!-- </div> -->

	</body>
	<script src="js/config.js"></script>
	<script src="js/book.js"></script>
	<script src="js/update.js"></script>
	<script type="text/javascript" charset="utf-8">
		var topList = "";
		var next;
		mui.init({
			 pullRefresh : {
			    container:".mui-content",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			    down : {
			      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
			      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
			      height:'50px',//可选,默认50px.下拉刷新控件的高度,
			      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
			      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
			      auto: false,//可选,默认false.首次加载自动上拉刷新一次
			      callback:load //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			    }
			  }
		});
		mui.plusReady(function() {
			var deviceNum = plus.storage.getItem("deviceNum");
			if (deviceNum == null || deviceNum == "") {
				plus.device.getInfo({
					success: function(e) {
						deviceNum = e.uuid;
						plus.storage.setItem("deviceNum", deviceNum);
					},
					fail: function(e) {
						mui.toast('获取设备号失败，请确认是否开启权限', {
							duration: 'short',
							type: 'div'
						})
					}
				});
			}
			// var fromType = plus.storage.getItem("fromType");
			// if (fromType == null || fromType == "") {
			// 	plus.storage.setItem("fromType", "mhtxs");
			// }
			mui.ajax(config.config.path + "/config/notice", {
				type: "GET",
				dataType: "json",
				success: function(result) {
					var code = result.code;
					if (code == 200) {
						var msg = result.data.value;
						if (msg != null && msg != '') mui.alert(msg, '公告', '知道了', null, 'div');
					}
				}
			});
			
			load();
			
			window.addEventListener('refresh', load);
		});

		function load(){
			ago();
			
			mui.ajax(config.config.path + "/book/page?page=1&limit=" + config.config.bookPageSize +
				"&sort=desc&sort_column=click_num", {
					type: "GET",
					dataType: "json",
					success: function(result) {
						var code = result.code;
						if (code == 200) {
							var ele = document.getElementById("dataList");
							var top = "<li class='mui-table-view-divider'>人气推荐</li>";
							var data = "";
							for (j = 0, len = result.data.records.length; j < len; j++) {
								data = data + ' <li class="mui-table-view-cell book" id="' + result.data
									.records[j].id + '">' +
									result.data.records[j].name +
									'<span class="mui-badge mui-badge-danger">' + result.data.records[j]
									.clickNum +
									'</span></li>';
							}
							topList = top + data;
							ele.innerHTML = topList;
							next = 2;
						}
						mui('.mui-content').pullRefresh().endPulldown();
					}
					
				});
		}

		document.getElementById("key").addEventListener('tap', function() {
			mui.openWindow({
				url: "result.html",
				id: "result.html",
				extras: { //自定义扩展参数，可以用来处理页面间传值

				},
				createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
				show: {
					autoShow: true //页面loaded事件发生后自动显示，默认为true/页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
				},
				waiting: {
					autoShow: false, //自动显示等待框，默认为true
					title: '正在加载...' //等待对话框上显示的提示内容
				}
			});
		});

		function ago(){
			var agoInfo = plus.storage.getItem('agoInfo');
			if (agoInfo != null) {
				var json;
				if(agoInfo.indexOf("{") != 0){
					json = {
							'bookName':agoInfo.split(":")[0],
							'chapterTitle':agoInfo.split(":")[1],
							'chapterId':agoInfo.split(":")[2],
							'bookId':agoInfo.split(":")[3],
							'bookNum':agoInfo.split(":")[4],
							'chapterNum':agoInfo.split(":")[5]
						};
					plus.storage.setItem('agoInfo',JSON.stringify(json));
				}else{
					json = JSON.parse(agoInfo);
				}
				var book = json.bookName;
				var chapterTitle = json.chapterTitle;
				var str = book + " - " + chapterTitle;
				if (str.length >= 22) str = str.substr(0, 20) + "...";
				document.getElementById("ago").innerHTML = '<span class="mui-badge")">上次阅读到：<a>' + str +
				'</a></span>';
			}
		}
		
		document.getElementById("ago").addEventListener("tap", function() {
			var agoInfo = plus.storage.getItem('agoInfo');
			var json = JSON.parse(agoInfo);
			var bookName = json.bookName;
			var chapterTitle = json.chapterTitle;
			var chapterId = json.chapterId;
			var bookId = json.bookId;
			var bookNum = json.bookNum;
			var chapterNum = json.chapterNum;
			chapter(chapterId, bookName, bookId,bookNum,chapterNum,chapterTitle);
		});

		mui(".bookList").on('tap', '.book', function() {
			//获取id
			var id = this.getAttribute("id");
			//传值给详情页面，通知加载新数据
			book(id);
		});
	</script>
</html>
